<template>
  <div style="padding-bottom:40px">
    <div class="d-m">
            <div class="datas-main">
                <div class="usercount">
                    <div class="usercount-title">
                        <span>
                            每日用户数量统计
                        </span>
                    </div>
                    <div class="p" ref="usertotalcount"></div>
                </div>
            </div>
            <div class="datas-main">
                <div class="totalamount">
                    <div class="totalamount-title">
                        <span>
                            每日金额统计
                        </span>
                    </div>
                    <div class="p" ref="totalamount"></div>
                </div>
            </div>
    </div>

    <div class="d-m" style="padding-top:20px;">
        <div class="datas-main" style="width:300px;">
            <div class="totalamount">
                <div class="totalamount-title">
                    <span>
                        每日浏览页面实时情况
                    </span>
                </div>
                <div class="p">
                    <div style="display:flex;">
                        <div>
                            首页
                        </div>
                        <div style="padding-left:60px;">
                            浏览次数: 5
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="datas-main">
                <div class="totalamount">
                    <div class="totalamount-title">
                        <span>
                            每日订单统计
                        </span>
                    </div>
                    <div class="p" ref="totalcount"></div>
                </div>
            </div>
            <div class="datas-main" style="width:480px;">
                <div class="totalamount">
                    <div class="totalamount-title">
                        <span>
                            每周消费最高用户
                        </span>
                    </div>
                    <div class="p">
                        <div style="display:flex;">
                            <div>
                                用户
                            </div>
                            <div style="padding-left:200px;">
                                消费金额: 5 元
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
  </div>
  
</template>

<script>
import {ref,reactive,onMounted} from 'vue'
import * as echarts from 'echarts'
// import echarts from '@/assets/echarts.min.js'
export default {
    setup(){
        var task = reactive({
            usertotalcount:ref(),
            totalamount:ref(),
            totalcount:ref(),
        })
        var p1 = ()=>{
            let option = {
                title:{
                    text:"用户数量统计",
                    left:'center'
                },
                xAxis:{
                    data:[1,2,3]
                },
                yAxis:{

                },
                series: [{
                    type: 'bar',
                    data: [1, 2, 3],
                }],
            }
            echarts.init(task.usertotalcount).setOption(option)
        }
        var p2 = ()=>{
            let option = {
                title:{
                    text:"每日金额",
                    left:'center'
                },
                xAxis:{
                    data:[1,2,3]
                },
                yAxis:{

                },
                series: [{
                    type: 'line',
                    data: [1, 2, 3],
                }],
            }
            echarts.init(task.totalamount).setOption(option)
        }
        var p3 = ()=>{
            let option = {
                title:{
                    text:"每日订单",
                    left:'center'
                },
                xAxis:{
                    data:[1,2,3]
                },
                yAxis:{

                },
                series: [{
                    type: 'bar',
                    data: [1, 2, 3],
                }],
            }
            echarts.init(task.totalcount).setOption(option)
        }
        onMounted(()=>{
            p1(),p2(),p3()
        })
        return task;
    }
}
</script>

<style scoped lang="scss">
.d-m{
    display: flex;
}
.datas-main{
    background-color: white;
    height: 500px;
    width: 100%;
    margin-left: 20px;
    display: flex;
    padding-top: 20px;
    .usercount{
        font-size: 20px;
        font-weight: bolder;
        color: rgb(130, 130, 130);
        margin-left: 20px;
        .usercount-title{
            border-left: 2px solid rgb(136, 157, 221);
            span{
                padding-left: 10px;
            }
        }
    }
    .totalamount{
        padding-left: 20px;
        font-size: 20px;
        font-weight: bolder;
        color: rgb(130, 130, 130);
        margin-left: 20px;
        .totalamount-title{
            border-left: 2px solid rgb(136, 157, 221);
            span{
                padding-left: 10px;
            }
        }
        
    }
}
.p{
    padding-top: 40px;
    width: 600px; 
    height: 400px;
}
</style>